<template>
	<div class="video">
		<div id="divPlugin" class="plugin"></div>
	</div>
</template>
<script>
import "../../../../public/jquery-1.7.1.min.js";
import "../../../../public/jsVideoPlugin-1.0.0.min.js";
import "../../../../public/webVideoCtrl.js";
export default {
	data() {
		return {
			oLiveView: {
				iProtocol: 1, // http 协议，1 表示 http 协议 2 表示 https 协议
				szIP: '192.168.0.241', // 设备的 IP 地址或者普通域名(比如花生壳域名)
				szPort: '80', // 登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口
				szUsername: 'admin', // 登录用户名称
				szPassword: 'Xbt@12131516', // 登录用户密码
				iStreamType: 1, // 码流类型 1-主码流，2-子码流，默认使用主码流预览
				iChannelID: 1, // 播放通道号，默认通道 1
				bZeroChannel: false, // 是否播放零通道，默认为 false
			},
		};
	},
	mounted() {
		this.initPlugin();
	},
	methods: {
		// 初始化插件参数及插入插件
		initPlugin() {
			let this_ = this;
			let oLiveView = this.oLiveView;
			window.WebVideoCtrl.I_InitPlugin({
				bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
				iWndowType: 1,
				cbInitPluginComplete: function () {
					console.log('初始化');
					window.WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(
						() => {
							// 检查插件是否最新
							window.WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
								if (bFlag) {
									console.log(
										'检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！'
									);
								}
								this_.clickLogin(oLiveView);
							});
						},
						() => {
							console.log(
								'插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe升级！'
							);
						}
					);
				},
			});
		},
		// 登录
		clickLogin(oLiveView) {
			let this_ = this;
			window.WebVideoCtrl.I_Login(
				oLiveView.szIP, //设备的 IP 地址
				oLiveView.iProtocol, //http 协议，1 表示 http 协议 2 表示 https 协议
				oLiveView.szPort, //登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口
				oLiveView.szUsername, //登录用户名称
				oLiveView.szPassword, //用户密码
				{
					timeout: 3000,
					success: function () {
						console.log(' 登录成功！');
						this_.clickGetDigitalChannelInfo(oLiveView);
					},
					error: function (oError) {
						console.log(' 登录失败！', oError.errorCode, oError.errorMsg);
					},
				}
			);
		},
		// 获取 端口 数字通道 (必须先获取端口 数字通道 或 模拟通道 才能开始预览)
		clickGetDigitalChannelInfo(oLiveView) {
			let this_ = this;
			var szDeviceIdentify = oLiveView.szIP + '_' + oLiveView.szPort;
			// 获取端口
			window.WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then(
				(oPort) => {
					console.log(' 获取端口成功！');
					// 获取数字通道
					window.WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, {
						async: false,
						success: function () {
							this_.clickStartRealPlay(oLiveView);
							console.log(' 获取数字通道成功！');
						},
						error: function () {
							console.log(' 获取数字通道失败！');
						},
					});
				},
				(oError) => {
					console.log(' 获取端口失败！');
				}
			);
		},
 
		// 开始预览
		clickStartRealPlay(oLiveView) {
			var szDeviceIdentify = oLiveView.szIP + '_' + oLiveView.szPort;
			window.WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
				// iWndIndex: i,
				iStreamType: oLiveView.iStreamType,
				// iChannelID: i + 1,
				bZeroChannel: oLiveView.bZeroChannel,
				success: function () {
					console.log('预览成功！');
				},
				error: function (status) {
					if (403 === status) {
						console.log('设备不支持Websocket取流！');
					} else {
						console.log('预览失败！');
					}
				},
			});
		},
	},
};
</script>
<style lang="scss">
.plugin {
	width: 665px;
	height: 878px;
}
.video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(../../../assets/images/back.png) no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  display: flex;
}
</style>